import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'
import { View, Text, Button, Video, ScrollView } from '@tarojs/components'
import { AtSearchBar, AtTabs, AtTabsPane, AtButton } from 'taro-ui'
import { useStore } from '../../../../model/index'
// import { getTags } from '../../../../api/index'

interface GetTagsResSubArr {
  label: string
  value: number
}

export default (props) => {
  /**
   * @description
   * firstBtnIndex是选中一级标签的index
   * tagsList是拿到的所有标签
   * firstBtnVal是选中一级标签的value
   * secondBtnCurrent是选中二级标签的current，主要用于选中状态表示
   * secondTagsList是选中某个一级标签后 二级标签的数组
   */

  const { firstBtnIndex, tagsList, firstBtnVal } = props
  const [secondBtnCurrent, setSecondBtnCurrent] = useState(-1)
  const [state, actions] = useStore('Index') //model 类似于redux的状态管理器
  const [secondTagsList, setSecondTagsList] = useState<GetTagsResSubArr[]>([])

  useEffect(() => {
    ;(async () => {
      if (firstBtnIndex !== -1) {
        let subArr = tagsList[firstBtnIndex].sub
        let tempArr = [] as Array<number>

        setSecondTagsList(subArr)
        subArr.forEach((element) => {
          tempArr.push(element.value)
        })
        
        await actions.toSaveVideoSecondType(tempArr)
      }

      setSecondBtnCurrent(-1)
      let choosedBtn = {
        firstBtn: firstBtnVal,
        secondBtn: -1
      }
      await actions.toSaveChoosedBtn(choosedBtn)
    })()
  }, [firstBtnIndex])

  const saveBtn = async (secondBtnIndex) => {
    setSecondBtnCurrent(secondBtnIndex)
    if (secondBtnIndex !== -1) {
      let choosedBtn = {
        firstBtn: firstBtnVal,
        secondBtn: secondTagsList[secondBtnIndex].value
      }
      await actions.toSaveChoosedBtn(choosedBtn)
    } else {
      await actions.toSaveChoosedBtn({
        firstBtn: firstBtnVal,
        secondBtn: -1
      })
    }
  }

  if (firstBtnIndex === -1)
    return (
      <ScrollView scrollX scrollWithAnimation className="scroll-wrap">
        <AtButton
          type="secondary"
          className={secondBtnCurrent === -1 ? 'choose-btn' : 'scroll-btn'}
          size="small"
          onClick={() => saveBtn(-1)}
        >
          全部
        </AtButton>
      </ScrollView>
    )
  else
    return (
      <ScrollView scrollX scrollWithAnimation className="scroll-wrap">
        <AtButton
          type="secondary"
          className={secondBtnCurrent === -1 ? 'choose-btn' : 'scroll-btn'}
          size="small"
          onClick={() => saveBtn(-1)}
        >
          全部
        </AtButton>
        {secondTagsList?.map((item, index) => {
          return (
            <AtButton
              type="secondary"
              className={
                secondBtnCurrent === index ? 'choose-btn' : 'scroll-btn'
              }
              size="small"
              onClick={() => saveBtn(index)}
            >
              {item.label}
            </AtButton>
          )
        })}
      </ScrollView>
    )
  // else return <View>还未开发</View>
}
